<template>
    <div>
        <!-- <div class="px-4 mt-4">
            <el-page-header :icon="ArrowLeft" @back="router.back()">
            </el-page-header>
        </div> -->
        <div class="flex mb-12 items-start justify-center">
            <!-- 侧边 -->
            <div class="side p-12 mt-[200px]">
                <div
                    class="flex flex-col items-center cursor-pointer hover:text-blue-500"
                    @click="handleShare"
                >
                    <el-icon :size="26"><Share /></el-icon>
                    <div>分享</div>
                </div>
                <div
                    class="mt-8 flex flex-col items-center cursor-pointer hover:text-blue-500"
                    @click="scrollToComment"
                >
                    <el-icon :size="26"><Comment /></el-icon>
                    <div>评论</div>
                </div>
            </div>
            <!-- 文章 -->
            <div class="main flex-1 max-w-[800px]">
                <div class="mb-8">
                    <div class="mt-12 mb-4 text-3xl font-bold text-slate-800">
                        {{ data.title }}
                    </div>
                    <div class="flex">
                        <div class="text-gray-400 mr-4" v-if="data.user">
                            {{ data.user.nickname }}
                        </div>
                        <div class="text-gray-400 mr-4" v-if="data.publishTime">
                            {{
                                dayjs(data.publishTime).format(
                                    'YYYY-MM-DD HH:mm:ss'
                                )
                            }}
                        </div>
                        <div class="text-gray-400">
                            {{ data.viewCount }} 浏览
                        </div>
                    </div>
                </div>
                <div class="text-slate-700">
                    <MDRender :value="data.content" />
                </div>
                <div class="mt-12" ref="commentContainerRef">
                    <div class="text-2xl font-bold mb-4">评论</div>
                    <SendComment type="article" :item-id="+route.params.id" />
                </div>
            </div>
            <!-- 热门 -->
             <div class="w-[350px]">

                 <Hot class="mt-[80px]" />
             </div>
        </div>
        <el-backtop :right="100" :bottom="100" />
    </div>
</template>

<script setup lang="ts" name="ArticleDetail">
import { getListUnauth } from '@/apis/unauthCrud'
import MDRender from '@/components/MDRender.vue'
import { Comment, Share } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import Hot from './Hot.vue'
import SendComment from '@/components/SendComment.vue'

const data = ref<any>({})
const route = useRoute()
const commentContainerRef = ref<HTMLElement | null>(null)

const getData = async () => {
    const id = route.params.id
    if (!id) return

    const res = await getListUnauth(
        'articles',
        {
            page: 1,
            pageSize: 10,
            id,
        },
        [
            {
                model: 'users',
                attributes: ['id', 'nickname', 'avatar'],
                as: 'user',
            },
        ]
    )
    if (!res.success) return
    data.value = res.data.rows[0]
}

// 分享
const handleShare = () => {
    const url = window.location.href
    navigator.clipboard.writeText(url)
    ElMessage.success('分享链接已复制到剪贴板')
}

getData()

// 把页面滚动到评论
const scrollToComment = () => {
    if (!commentContainerRef.value) return
    const offsetTop = commentContainerRef.value.offsetTop
    window.scrollTo({
        top: offsetTop,
        behavior: 'smooth',
    })
}
</script>

<style scoped></style>
